import './index.less'
import { DatePicker } from 'antd'
import dayjs from 'dayjs';
import { useEffect, useState } from 'react'
import * as echarts from 'echarts';
import {getChart1,getChart2} from '@/services/system'
const dateFormat = 'YYYY/MM'
// echarts
////数字转中文大写函数，支持0.00到999999999.99
const number2yuan = (number: string) => {
    const yuan1 = ['亿', '仟', '佰', '拾', '元', '角', '分']
    const yuan2 = ['仟', '佰', '拾', '元']
    const one2ten = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
    let Nnumber: any = number.split('')
    let showyuan = ''
    let n = Nnumber.length
    Nnumber.splice(n - 3, 1)
    n = n - 1
    function morestep(part1: any) {
        let showyuan2 = part1[0] == 0 ? '' : one2ten[part1[0]] + '角'
        let showyuan3 = part1[1] == 0 ? '' : one2ten[part1[1]] + '分'
        showyuan = showyuan2 + showyuan3
        let showyuan1 = ''
        let k = 3
        for (let i = Nnumber.length - 1; i >= 0; i--) {
            showyuan1 = one2ten[Nnumber[i]] + yuan2[k] + showyuan1
            k--
        }
        let showyuanList = showyuan1.split('')
        for (let i = 0; i < showyuanList.length; i++) {
            if (showyuanList[i] == '零') {
                showyuanList.splice(i + 1, 1)
            }
        }
        if (Number(number) % 100 < 10 && Number(number) % 1000 < 10 && Number(number) % 1000 >= 1 && Number(number) % 100 >= 1) {
            showyuanList.splice(showyuanList.length - 3, 1)
        } else if (Number(number) % 1000 < 1) {
            showyuanList.splice(2, 3)
        } else if (Number(number) % 100 < 1) {
            showyuanList.splice(showyuanList.length - 2, 2)
        }
        if (showyuanList[showyuanList.length - 1] != '元') {
            showyuanList.splice(showyuanList.length, 0, '元')
        }
        if (showyuanList[showyuanList.length - 2] == '零') {
            showyuanList.splice(showyuanList.length - 2, 1)
        }
        return showyuanList.join('') + showyuan
    }
    if (n == 3) {
        let showyuan1 = Nnumber[0] == 0 ? '' : one2ten[Nnumber[0]] + '元'
        let showyuan2 = Nnumber[1] == 0 ? '' : one2ten[Nnumber[1]] + '角'
        let showyuan3 = Nnumber[2] == 0 ? '' : one2ten[Nnumber[2]] + '分'
        showyuan = showyuan1 + showyuan2 + showyuan3
    } else if (n > 3 && n < 7) {
        let part1 = Nnumber.splice(n - 2, 2)
        showyuan = morestep(part1)
    } else if (n >= 7) {
        if (n < 11) {
            let part1 = Nnumber.splice(n - 2, 2)
            let Nnumber1 = Nnumber
            Nnumber = [...Nnumber.slice(Nnumber.length - 4)]
            let showyuanT = morestep(part1)
            Nnumber = [...Nnumber1.slice(0, Nnumber1.length - 4)]
            let showyuanR = morestep([0, 0])
            showyuan = showyuanR + showyuanT
            showyuan = showyuan.replace('元', '万')
        } else {
            let showyuan3 = one2ten[Nnumber[0]] + '亿'
            Nnumber.shift()
            let part1 = Nnumber.splice(n - 3, 2)
            let Nnumber1 = [...Nnumber]
            Nnumber = [...Nnumber.slice(Nnumber.length - 4)]
            let showyuanT = morestep(part1)
            Nnumber = [...Nnumber1.slice(0, Nnumber1.length - 4)]
            let showyuanR = morestep([0, 0])
            showyuan = showyuan3 + showyuanR + showyuanT
            showyuan = showyuan.replace('元', '万')
        }
    }
    return showyuan
}

type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;


const System = () => {
    let [data1,setdata1]=useState([])
    let [data2,setdata2]=useState([])
    useEffect(() => {
        getChart1().then((res:any)=>{
            console.log(res.data.slice(12,24));
            let n1=res.data.slice(0,12)
            let n2=res.data.slice(12,12)
            setdata1(n1)
            setdata2(n2)
            showchar1()
        })
        getChart2().then((res:any)=>{
            console.log(res.data.slice(12,24));
            let n1=res.data.slice(0,12)
            let n2=res.data.slice(12,12)
            setdata1(n1)
            setdata2(n2)
            showchar2()
        })
    }, [])
    option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
            text: '资金趋势图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['应付账款', '应收账款']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '应付账款',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(128, 255, 165)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(1, 191, 236)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: data1
            },
            {
                name: '应收账款',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(0, 221, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(77, 119, 255)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: data2
            }
        ]
    };
    const showchar1=()=>{
        var chartDom = document.getElementById('echartLogin1')!;
        var myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
    }
    const showchar2=()=>{
        var chartDom = document.getElementById('echartLogin2')!;
        var myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
    }
    return (
        <div>
            <div className="topLink">
                <div className='topFrame'>
                    <div className='topTitle' style={{ height: 30, width: 150, lineHeight: 20, textAlign: 'left' }}>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;快捷方式</span>
                    </div>
                    <div className="topLinkDetail">
                        {['凭证管理', '资金管理', '项目余额表', '期末结转'].map((v, i) => <div key={i}>{v}</div>)}
                    </div>
                </div>
            </div>
            <div className='middle'>
                <div className='middleTitle'>
                    <span className='middleTitle-span'>2021年3月财务指标</span>
                    <DatePicker defaultValue={dayjs('2015/01', dateFormat)} format={dateFormat} />
                </div>
                <div className='center'>
                    <div className='middleTitle-1'>
                        <ul>
                            <li>货币资金</li>
                            <li>10000</li>
                        </ul>
                        <ul>
                            <li>应收账款</li>
                            <li>10000</li>
                        </ul>
                    </div>
                    <div className='middleTitle-1'>
                        <ul>
                            <li>货币资金</li>
                            <li>10000</li>
                        </ul>
                        <ul>
                            <li>应收账款</li>
                            <li>10000</li>
                        </ul>
                    </div>
                    <div className='middleTitle-1'>
                        <ul>
                            <li>货币资金</li>
                            <li>10000</li>
                        </ul>
                        <ul>
                            <li>应收账款</li>
                            <li>10000</li>
                        </ul>
                    </div>
                    <div className='middleTitle-1'>
                        <ul>
                            <li>货币资金</li>
                            <li>10000</li>
                        </ul>
                        <ul>
                            <li>应收账款</li>
                            <li>10000</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className='echarts'>
                <div className='echarts-1' id='echartLogin1' >
                </div>
                <div className='echarts-1' id='echartLogin2' >
                </div>
            </div>
        </div>
    )
}
export default System
////
